<template>
  <div class="content">
      <div class="water">
          <div class="water-row">
            <div class="water-box">
              <div class="water-card">
                <p><span>本时段总负荷</span><span>{{elecUseInfo.power}}</span><span>kW</span></p>
              </div>
              <div class="water-card">
                <p><span>昨日有功电量</span><span>{{elecUseInfo.consum}}</span><span>kWh</span></p>
              </div>
              <div class="water-card">
                <p><span>昨日无功电量</span><span>{{elecUseInfo.wgconsum}}</span><span>kVar</span></p>
              </div>
              <div class="water-card">
                <p><span>昨日谷电利用率</span><span>{{elecUseInfo.grate}}</span><span>%</span></p>
              </div>
            </div>
            <div class="water-box">
              <div class="water-title">
                <p>昨日峰谷电占比<i class="gl"></i><i class="gl"></i></p>
              </div>
              <chart :options="chart1" auto-resize></chart>
            </div>
          </div>
          <div class="water-row">
            <div class="water-box">
              <div class="water-title">
                <p>当前负荷曲线 <i class="gl"></i><i class="gl"></i></p>
              </div>
              <chart :options="chart2" auto-resize></chart>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'waterE',
    data () {
      return {
        chart1: {
          color: ['#0d2dd7','#9d4fff','#7ee5ff','#2b5cdf'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            show: false,
          },  
          series : [
            {
              name:'总时长',
              type:'pie',
              radius : '75%',
              center: ['50%', '50%'],
              data:[
                {value:435, name:'峰'},
                {value:310, name:'谷'},
                {value:74, name:'尖'},
                {value:235, name:'平'},
              ].sort(function (a, b) { return a.value - b.value; }),
                label: {
                normal: {
                  textStyle: {
                    color: '#000237'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: '#000237'
                  },
                  length: 10,
                  length2: 60
                }
              }
            }
          ]
        },
        chart2: {
          color: ['#0d2dd7','#9d4fff','#7ee5ff','#2b5cdf'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
          },
          legend: {
            show: false
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27','06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-27'],
              axisLine: {lineStyle: {color: '#000237'}}
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '功率（kW）',
              axisLine: {lineStyle: {color: '#000237'}},
              splitLine: {lineStyle: {color: 'rgba(0,0,0,.1)'}}
            }
          ],
          series: [
            {
              name: '负荷',
              type: 'line',
              symbol: 'circle',
              symbolSize: 3,              
              label: {
                show: false,
              },
              lineStyle: {
                width: 3,
                shadowColor: 'rgba(25, 100, 120, 0.5)',
                shadowOffsetY: 4,
                shadowBlur: 10
              },
              data: [320, 332, 301, 334, 390, 236, 314, 320, 332, 301, 334, 390, 236, 314, 314],
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(0, 69, 222)'
                  }, {
                    offset: 1,
                    color: 'rgb(0, 100, 222)'
                  }])
                }
              },
            }
          ]
        },
        elecUseInfo: {}
      }
    },
    mounted: function () {
      this.getData()
    },
    methods: {
      getData: function () {
        this.$http('/vqdisplay/elecMonitor/data')
        .then( response=> {
          let _data = response.data.body  
          // console.log(_data)
          this.elecUseInfo = _data.elecUseInfo
          this.chart1.series[0].data = _data.elecUsePie.series
          this.chart2.xAxis[0].data = _data.elecLoadLine.xAxis
          this.chart2.series[0].data = _data.elecLoadLine.series[0]['负荷']
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../../style/water.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>